<script lang="ts" setup>
import { ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '登录设备管理',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 设备数据类型
interface Device {
  id: string
  deviceName: string
  deviceType: string
  lastLoginTime: string
  ipAddress: string
  location: string
  isCurrentDevice: boolean
}

// 设备列表
const devices = ref<Device[]>([
  {
    id: '1',
    deviceName: 'Chrome / Windows 10',
    deviceType: 'computer',
    lastLoginTime: '2024-01-15 09:30:45',
    ipAddress: '192.168.1.1',
    location: '北京市',
    isCurrentDevice: true,
  },
  {
    id: '2',
    deviceName: 'Safari / iOS 16',
    deviceType: 'mobile',
    lastLoginTime: '2024-01-14 18:23:11',
    ipAddress: '192.168.1.2',
    location: '上海市',
    isCurrentDevice: false,
  },
  {
    id: '3',
    deviceName: 'Firefox / macOS',
    deviceType: 'computer',
    lastLoginTime: '2024-01-13 14:15:32',
    ipAddress: '192.168.1.3',
    location: '广州市',
    isCurrentDevice: false,
  },
])

// 移除设备
function removeDevice(deviceId: string) {
  const device = devices.value.find(d => d.id === deviceId)
  if (device && device.isCurrentDevice) {
    uni.showToast({
      title: '不能移除当前登录设备',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '移除设备',
    content: '确定要移除该设备的登录状态吗？移除后需要重新登录。',
    success: (res) => {
      if (res.confirm) {
        // 模拟移除操作
        uni.showLoading({
          title: '处理中...',
        })

        setTimeout(() => {
          uni.hideLoading()
          // 从列表中移除设备
          devices.value = devices.value.filter(d => d.id !== deviceId)

          uni.showToast({
            title: '设备已移除',
            icon: 'success',
          })
        }, 1000)
      }
    },
  })
}

// 获取设备图标
function getDeviceIcon(deviceType: string) {
  switch (deviceType) {
    case 'computer':
      return 'i-solar:laptop-broken'
    case 'mobile':
      return 'i-solar:smartphone-2-broken'
    case 'tablet':
      return 'i-solar:tablet-broken'
    default:
      return 'i-solar:smartphone-2-broken'
  }
}

// 一键移除所有非当前设备
function removeAllOtherDevices() {
  const otherDevicesCount = devices.value.filter(d => !d.isCurrentDevice).length

  if (otherDevicesCount === 0) {
    uni.showToast({
      title: '没有其他登录设备',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '移除所有设备',
    content: `确定要移除所有 ${otherDevicesCount} 台非当前登录设备吗？移除后需要重新登录。`,
    success: (res) => {
      if (res.confirm) {
        // 模拟移除操作
        uni.showLoading({
          title: '处理中...',
        })

        setTimeout(() => {
          uni.hideLoading()
          // 只保留当前设备
          devices.value = devices.value.filter(d => d.isCurrentDevice)

          uni.showToast({
            title: '设备已全部移除',
            icon: 'success',
          })
        }, 1000)
      }
    },
  })
}
</script>

<template>
  <view class="devices-management-container min-h-screen bg-slate-50">
    <!-- 说明提示 -->
    <view class="tips-section mx-4 mt-3 rounded-lg bg-slate-100 px-4 py-3 shadow-sm">
      <text class="text-xs text-slate-600">
        管理您的登录设备，移除不需要的设备以保护账户安全
      </text>
    </view>

    <!-- 设备列表 -->
    <view class="devices-list mt-3 px-4">
      <view
        v-for="device in devices"
        :key="device.id"
        class="device-item mb-3 rounded-lg bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg"
      >
        <view class="mb-3 flex items-center justify-between">
          <view class="flex items-center">
            <view class="mr-3 h-10 w-10 flex items-center justify-center rounded-full bg-primary/10">
              <i class="text-lg text-primary" :class="[getDeviceIcon(device.deviceType)]" />
            </view>
            <text class="text-base text-slate-900 font-medium">{{ device.deviceName }}</text>
            <view v-if="device.isCurrentDevice" class="bg-success/10 text-success ml-2 rounded-full px-2 py-1 text-xs font-medium">
              当前设备
            </view>
          </view>
          <button
            v-if="!device.isCurrentDevice"
            class="border border-red-200 rounded-full bg-red-50 px-3 py-1 text-sm text-red-600 transition-colors hover:bg-red-100"
            @click="removeDevice(device.id)"
          >
            移除
          </button>
        </view>
        <view class="rounded-md bg-slate-50 p-3 text-xs text-slate-500 space-y-1.5">
          <view class="flex justify-between">
            <text class="text-slate-600">最后登录：</text>
            <text class="text-slate-800 font-medium">{{ device.lastLoginTime }}</text>
          </view>
          <view class="flex justify-between">
            <text class="text-slate-600">IP地址：</text>
            <text class="text-slate-800 font-medium">{{ device.ipAddress }}</text>
          </view>
          <view class="flex justify-between">
            <text class="text-slate-600">登录地点：</text>
            <text class="text-slate-800 font-medium">{{ device.location }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 移除所有按钮 -->
    <view v-if="devices.filter(d => !d.isCurrentDevice).length > 0" class="action-section mt-4 px-4">
      <button
        class="w-full border border-red-500 rounded-lg bg-white py-3 text-sm text-red-600 font-medium shadow-sm transition-colors active:bg-red-100 hover:bg-red-50"
        @click="removeAllOtherDevices"
      >
        一键移除所有非当前设备
      </button>
    </view>

    <!-- 安全提示 -->
    <view class="security-tips-section mx-4 mb-6 mt-4 rounded-lg bg-white px-4 py-3 shadow-sm">
      <view class="flex items-start">
        <i class="i-solar:shield-check-broken mr-2 mt-0.5 flex-shrink-0 text-lg text-blue-500" />
        <text class="line-clamp-3 text-xs text-slate-600 leading-relaxed">
          • 定期检查并移除未使用的设备
          • 在公共设备上登录后记得及时退出
          • 如发现陌生设备，请立即修改密码
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.devices-management-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 20px;
}

.device-item {
  transition: all 0.3s ease;
}

.device-item:active {
  transform: scale(0.98);
  opacity: 0.9;
}

button {
  line-height: normal;
  font-weight: 500;
}

button::after {
  border: none;
}

// 图标动画效果
.device-item i {
  transition: transform 0.3s ease;
}

.device-item:active i {
  transform: rotate(5deg);
}

// 响应式调整
@media (min-width: 768px) {
  .devices-management-container {
    max-width: 540px;
    margin: 0 auto;
    padding: 20px;
  }

  .tips-section,
  .security-tips-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .devices-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// 文本样式优化
.text-xs {
  line-height: 1.5;
}
</style>
